<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-4C56GQP4ZL"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag() { dataLayer.push(arguments); }
        gtag('js', new Date());

        gtag('config', 'G-4C56GQP4ZL');
    </script>

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <meta name="browsermode" content="application">
    <meta name="full-screen" content="yes" />
    <meta name="x5-fullscreen" content="true" />
    <meta name="x5-page-mode" content="app" />
    <meta name="360-fullscreen" content="true" />
    <title>KEEPro</title>
    <link rel="icon" href="./favicon.ico">
    <link rel="shortcut icon" href="./favicon.ico">
    <link rel="stylesheet" href="./css/styles.css"> <!-- 引用外部CSS文件 -->
</head>

<body id="body">
    <div class="content">
        <hr class="hr">
        <div class="container">
            <span id="hitokoto">正在获取中...</span>
        </div>
        <script src="https://v1.hitokoto.cn/?encode=js&select=%23hitokoto" defer></script>
    </div>
    <div id="main-div">
        <div id="new-Img" class="new-img">
            <div class="bgimgwrap" id="bgimgwrap">
                <img src="" class="innerbgimg" id="bg-img" />
            </div>
            <img src="" id="gui-img" />
            <div class="portrait-wrap" id="portrait-wrap">
                <img class="portrait" id="portrait" src="" />
            </div>
            <div class="weather-imgwrap">
                <img src="" class="weather" id="weather" src="" />
            </div>
            <span class="username" id="username">UserName</span>
            <span class="keep-title" id="keep-title">户外跑步</span>
            <span class="mile"><span id="mile" class="mile-data">0.00</span><span class="gongli">公里</span></span>
            <span class="datetime date" id="date">0000/00/00</span>
            <span class="datetime time" id="time">00:00</span>
            <span class="env temperature" id="temperature">00</span>
            <span class="env humidity" id="humidity">00</span>
            <span class="speed-time speed" id="speed">00'00"</span>
            <span class="speed-time cost-time" id="cost-time">00:00:00</span>
            <span class="speed-time calorie" id="calorie">0</span>
        </div>
        <div class="set-data">
            <div id="messageBox">
            </div>
            <div class="header-container">
                <!-- <h4>&nbsp;数据设置&nbsp;</h4>&nbsp; -->
                <button onclick="Download(Download1)" class="one_click">下载图片</button>&nbsp;
                <button onclick="Download(Download2)" class="one_click">查看图片</button>&nbsp;&nbsp;&nbsp;
                <button onclick="drawMine('https://tool.joytion.cn/generate-track')"
                    class="flush-btn">更新绘画更径</button>&nbsp;&nbsp;&nbsp;
                <button onclick="storeToIndexedDB(tmp_portrait_src,tmp_bgimg_osrc)"
                    class="storeToIndexedDB-btn">永存带√信息</button>
                <connect>&nbsp&nbsp</connect>
                <button onclick="clearIndexedDB()" class="clear-btn">重置</button>
            </div>

            <ul class="setDataList">
                <hr />
                <div class="background-green">
                    <li>
                        <label data-text="√">√用户名：</label>
                        <input id="inpt_username" onchange="setData()" type="text" class="username-inp"></br>
                    </li>
                    <li>
                        <label data-text="√">√头像：</label>
                        <button onclick="inpt_portrait_onClick()" class="inpt-btn">选择图片</button>
                        <input style="display:none;" type="file" accept="image/*" id="inpt_portrait"
                            onchange="portrait_inpt()" />
                        <button onclick="init_portrait()" class="init-btn">恢复默认</button></br>
                    </li>
                    <li>
                        <label data-text="√">√标题：</label>
                        <span>keep•</span>
                        <input id="inpt_keep_title" onchange="setData()" type="text" class="keep-title-inp">
                    </li>
                </div>
                </li>
                <hr />
                <div class="background-blue">
                    <li>
                        <label data-text="#rand">公里#rand：</label>
                        <input id="inpt_miles" onchange="setData()" class="mile2-inp">
                        <div class="background-color-block1">
                            √Min: <input type="text" id="min_miles" onchange="set_km_and_speed()"
                                class="mile2-inp range-input">
                            √Max: <input type="text" id="max_miles" onchange="set_km_and_speed()"
                                class="mile2-inp range-input">
                    </li>
                    <li>
                        <label data-text="#rand">配速#rand：</label>
                        <input id="inpt_speeds" onchange="setData()" type="text" class="mile2-inp">
                        <div class="background-color-block1">
                            √Min: <input type="text" id="min_speeds" onchange="set_km_and_speed()"
                                class="mile2-inp range-input">
                            √Max: <input type="text" id="max_speeds" onchange="set_km_and_speed()"
                                class="mile2-inp range-input">
                        </div>
                    </li>

                </div>

                <div class="background-color-block2" data-text="#live">
                    <li>
                        <label data-text="#live">时间#live:</label>
                        <input id="inpt_year" onchange="setData()" type="text" class="time-inp year-inp">
                        <span>年</span>
                        <input id="inpt_month" onchange="setData()" type="text" class="time-inp">
                        <span>月</span>
                        <input id="inpt_day" onchange="setData()" type="text" class="time-inp">
                        <span>日</span>
                        <input id="inpt_hour" onchange="setData()" type="text" class="time-inp">
                        <span>时</span>
                        <input id="inpt_min" onchange="setData()" type="text" class="time-inp">
                        <span>分</span>
                    </li>
                </div>
                <div class="weather-container">

                    <div class="background-color-block2" data-text="#live">
                        <li>
                            <label data-text="#live">天气#live:</label>
                            <select onchange="weather_Select_onChange()" id="weather_Select">
                                <option value="images/weather1.png">晴</option>
                                <option value="images/weather2.png">多云</option>
                                <option value="images/weather3.png">阴天</option>
                            </select>
                            &nbsp;&nbsp;温度:
                            <input id="inpt_temperature" onchange="setData()" type="text">&nbsp;
                            &nbsp;&nbsp;湿度:
                            <input id="inpt_humidity" onchange="setData()" type="text">
                            <br>
                            <div class="align-center">
                                <span
                                    class="ApiExplanation">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp将通过Api获取实时温湿度</span>
                            </div>
                        </li>
                    </div>
                </div>

                <hr />

                <div class="background-green">
                    <li>
                        <label data-text="√">√背景：</label>
                        <select onchange="default_bgImgSelect_onChange()" id="default_bgImgSelect">
                            <option value="guiji_Select_1">南体育场</option>
                            <option value="guiji_Select_2">军工操场</option>
                            <option value="guiji_Select_3">北体育场</option>
                        </select>
                    </li>
                    <li>
                        <label data-text="√">√自定义背景：</label>
                        <button onclick="inpt_bgimg_onClick()">选择图片</button>
                        <input style="display:none;" type="file" accept="image/*" id="inpt_bgimg"
                            onchange="bgimg_inpt()" />
                        <button onclick="init_bgimg()" class="init-btn">恢复默认</button>
                    </li>

                    <li>
                        <label>×预设轨迹：</label>
                        <select onchange="guijiSelect_onChange()" id="guiji_Select_1" class="guijiSelect">
                            <option value="['images/bg1_1.png', 'images/bg1_empty2.png']">预设1</option>
                            <option value="['images/bg1_2.png', 'images/bg1_empty2.png']">预设2</option>
                            <option value="['images/bg1_3.png', 'images/bg1_empty2.png']">预设3</option>
                            <option value="['images/bg1_4.png', 'images/bg1_empty2.png']">预设4</option>
                            <option value="['images/bg1_5.png', 'images/bg1_empty2.png']">预设5</option>
                            <option value="['images/bg1_empty2.png', 'images/bg1_empty2.png']">空</option>
                        </select>
                        <select onchange="guijiSelect_onChange()" id="guiji_Select_2" class="guijiSelect">
                            <option value="['images/bg2_empty.png', 'images/bg2_empty.png']">空</option>
                        </select>
                        <select onchange="guijiSelect_onChange()" id="guiji_Select_3" class="guijiSelect">
                            <option value="['images/bg3_empty.png', 'images/bg3_empty.png']">空</option>
                        </select>
                        <label>&nbsp;&nbsp;&nbsp;绘制轨迹：</label>
                        <button onclick="inpt_drawbtn_onClick()">点击绘制</button>
                    </li>
                    <li>
                        <label data-text="√">√加载时自动绘画路径</label>
                        <input type="checkbox" id="auto_draw_checkbox" onchange="auto_draw_checkbox_onchange()"
                            checked /><span>自动</span>
                    </li>
                    <li>
                        <label data-text="√">√路径变色：</label>
                        <input type="checkbox" id="inpt_colorchange_checkbox"
                            onchange="inpt_colorchange_checkbox_onchange()" checked /><span>启用</span>
                    </li>
                    <li id="bs_prop_inpt_wrap">
                        <label data-text="√">√变色概率：</label>
                        <input id="inpt_bs_prob" onchange="setData()" type="text">
                    </li>
                    <li id="inpt_bs_range_wrap">
                        <label data-text="√">√变色步长范围：</label>
                        <input id="inpt_bs_range_min" onchange="setData()" type="text">
                        <span>~</span>
                        <input id="inpt_bs_range_max" onchange="setData()" type="text">
                    </li>
                </div>
                <hr />
                <div class="background-green">
                    <li>
                        <label data-text="√">√图片宽度：</label>
                        <input id="inpt_savePic_width" onchange="setData()" type="text">
                    </li>
                </div>
                <!-- <li>
                    <button onclick="Download(Download1)" class="large-btn">保存图片</button>
                </li> -->
                <!-- <li>
                    <button onclick="Download(Download2)">查看图片</button>
                <li> -->
                <button onclick="Download(Download1)" class="large-btn">保存图片</button>
                </li>
                <li>
                    <button onclick="Download(Download3)">保存图片</button>
                    <span>(备用方案)</span>
                </li>
                <li>
                    <button onclick="Download(Download4)">保存图片</button>
                    <span>(备用方案2, 请手动重命名下载文件)</span>
                </li>
            </ul>
            <div id="drawpic_overlay">
                <div class="drawpic_popup">
                    <div>
                        <h5>绘制轨迹</h5>
                    </div>
                    <div id="drawpic_canvas_wrap2">
                        <div id="drawpic_canvas_wrap">
                            <canvas id="drawpic_canvas" width="1" height="1"></canvas>
                        </div>
                    </div>
                    <div>
                        <button onclick="drawpic_hidebtn_onClick()">取消</button>
                        <button onclick="drawpic_initbtn_onClick()" class="init-btn">重置</button>
                        <li>
                            <!-- <button onclick="saveDrawingToFile()">保存json</button> -->
                            <button
                                onclick="Json2Draw('https://tool.joytion.cn/generate-track')">随机生成路径</button>&lt--适配预设1
                        </li>
                        <button onclick="drawpic_yesbtn_onClick()">确定</button>
                    </div>
                    <canvas id="buffer_canvas" style="display: none;"></canvas>
                </div>
            </div>
        </div>
        <div class="warning-wrap">
            <ul class="setDataList">
                <li>
                    <div class="warning">
                        <span>
                            <b>免责声明: 页面仅供学习交流，<br />请勿用于其他用途，<br />否则后果作者概不负责！</b>
                        </span>
                    </div>
                    <div class="explanation">
                        <span>1. 修改输入框中的内容即可更改截图中出现的各项数值.</span>
                        <br />
                        <span>2. 点击"保存图片"即可自动生成截图并保存到本地.</span>
                        <br />
                        <br />
                        <span>keep运动截图生成&ensp;v3.1</span>
                        <br />
                        <span>项目地址：<a href="https://gitee.com/joytion/keep/" target="_blank">KEEPro</a></span>
                        <br />
                        <span>项目历程：<a href="https://gitee.com/jimaske/njupt-keep" target="_blank">@jimaske</a>--&gt<a
                                href="https://gitee.com/fyhb/keep" target="_blank">@fyhb</a>--&gt<a
                                href="https://gitee.com/joytion/my_keep/" target="_blank">@joytion</a>--&gt<a
                                href="https://gitee.com/joytion/keep/" target="_blank">@joytion(KEEPro)</a></span>
                    </div>
                </li>
                <br />
                <li>
                    <div class="update">
                        <span>更新：</span>
                        <br />
                        <span>1、调用api获取实时温度湿度，解放双手。</span>
                        <br />
                        <span>2、使用IndexedDB实现永久保存包括用户名、头像在内的绝大多数信息。</span>
                        <br />
                        <span>3、系列细节优化</span>
                        <br />
                        <span>4、通过后端随机生成路径</span>
                        <br />
                        <div class="explanation">
                            <span>计划：</span>
                            <span>无。 已全部完成</span>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <script src="js/invoke/html2canvas.min.js"></script>
    <script src="js/invoke/amapHelper.js"></script>
    <script src="js/indexedDB.js"></script>
    <script src="js/init.js"></script>
    <script src="js/render.js"></script>
    <script src="js/select_manner.js"></script>
    <script src="js/dataURLtoBlob.js"></script>
    <script src="js/img_both_inpt_set.js"></script>
    <script src="js/draw_personalization.js"></script>
    <script src="js/download_img.js"></script>
    <script src="js/drawMine.js"></script>
    <script src="js/onload.js"></script>
</body>

</html>